<!-- 项目查询 -->
<template lang="html">
  <div class="projectQuery">
    <!-- 项目查询 -->
    <Card :bordered="false">
      <p slot="title">项目查询</p>
      <p>
        <Row>
          <Col span="2">
            <p class="title-p">报告类型</p>
          </Col>
          <Col span="12" >
            <RadioGroup v-model="queryReportType" type="button" @on-change="changeQueryReportType">
              <Radio label="全部"></Radio>
              <Radio label="报告表"></Radio>
              <Radio label="报告书"></Radio>
              <Radio label="现状评估报告"></Radio>
              <Radio label="规划"></Radio>
              <Radio label="验收"></Radio>
            </RadioGroup>
          </Col>
        </Row>

        <Row>
          <Col span="2">
            <p class="title-p">选择时间</p>
          </Col>
          <Col span="12">
            <RadioGroup v-model="queryTime" type="button" @on-change="changeQueryTime">
              <Radio label="不限"></Radio>
              <Radio label="近一周"></Radio>
              <Radio label="近一个月"></Radio>
              <Radio label="近半年"></Radio>
              <Radio label="近一年"></Radio>
            </RadioGroup>
          </Col>
        </Row>

        <Row style="padding-bottom:10px;">
          <Col span="2">
            <p class="title-p">选择地区</p>
          </Col>
          <Col span="22">
            <Row>
              <Col span="2">
                <Select v-model="queryMProvince" style="width:100%" placeholder="省份" @on-change="changeQueryMProvince">
                    <Option v-for="item in cityList" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </Col>
              <Col span="2" offset="1">
                <Select v-model="queryMCity" style="width:100%" placeholder="城市" @on-change="changeQueryMcity">
                    <Option v-for="item in cities" :value="item.name" :key="item.name">{{ item.name }}</Option>
                </Select>
              </Col>
              <Col span="6" offset="13">
                <Input search enter-button placeholder="请输入关健词" @on-search='querySearch' v-model="querySearchText"/>
              </Col>
            </Row>
          </Col>
        </Row>

        <Row>
          <Col>
            <Table border :loading="queryLoading" :columns="queryColumns" :data="queryData"></Table>
            <div v-if="hidePage" style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page
                  :total="queryPageTotal"
                  :current="queryPageNum"
                  :page-size="queryPageSize"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="getQueryProject"
                  @on-page-size-change='queryPageChangeSize'>
                </Page>
              </div>
            </div>
          </Col>
        </Row>
      </p>
    </Card>

    <!-- 已完成 -->
    <Card v-if="hideCompleted" :bordered="false" style="margin-top:20px;">
      <p slot="title">已完成项目</p>
      <p>
        <Row style="margin-bottom:20px;">
          <Col span="2" style="height:36px;line-height:36px;">
            <p class="title-p">日期范围</p>
          </Col>
          <Col span="22">
            <Row>
              <Col span="4">
                <DatePicker type="date" placeholder="开始时间" size="large"></DatePicker>
              </Col>
              <Col span="1" style="text-align:center;">
                <span >—</span>
              </Col>
              <Col span="4">
                <DatePicker type="date" placeholder="结束时间" size="large"></DatePicker>
              </Col>
              <Col span="15">
                <Row>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">总计</Col>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">30个报告书20个报告表</Col>
                  <Col style="border:1px #e8eaec solid;text-align: center;padding:6px 0" span="8">绩效8000</Col>
                </Row>
              </Col>
            </Row>
          </Col>
        </Row>
        <Row>
          <Col>
            <Table border :loading="completeLoading" :columns="completeColumns" :data="completeData"></Table>
            <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                <Page
                  :total="completePageTotal"
                  :current="completePageNum"
                  :page-size="completePageSize"
                  show-total
                  show-elevator
                  show-sizer
                  @on-change="getCompleteProject"
                  @on-page-size-change='completePageChangeSize'>
                </Page>
              </div>
            </div>
          </Col>
        </Row>
      </p>
    </Card>

  </div>
</template>

<script>
import cityList from "../../libs/city.js"
export default {
  props: {
    hidePage: {
      default: true,
    },
    hideCompleted: {
      default: true,
    },
  },
  data() {
    return {
      querySearchText: '',

      //项目查询
      queryPageTotal: 0,
      queryPageNum: 1,
      queryPageSize: 10,
      queryColumns: [
        { align: "center", title: "项目名称", key: "Project_name" },
        { align: "center", title: "建设单位", key: "Build_unit", sortable: true },
        { align: "center", title: "报告类型", key: "Report_type", sortable: true },
        { align: "center", title: "地区", key: "Build_address", sortable: true },
        { align: "center", title: "修改日期", key: "Perject_time", },
      ],
      queryData: [],
      queryLoading: true,

      queryReportType: '全部',
      queryReportType_number: 0,
      queryTime: '不限',
      queryTime_number: 0,
      queryMProvince: null,
      queryMCity: null,

      //已完成
      completePageTotal: 0,
      completePageNum: 1,
      completePageSize: 10,
      completeColumns: [
        { type: "index", align: "center", title: "序号", key: "num" },
        { align: "center", title: "项目名称", key: "Project_name" },
        { align: "center", title: "报告类型", key: "Report_type" },
        { align: "center", title: "地区", key: "Build_area_code" },
        { align: "center", title: "审批部门", key: "Project_approval_unit" },
        { align: "center", title: "绩效", key: "Contract_amount" },
      ],
      completeData: [],
      completeLoading: true,

      cityList,
      cities: [],
    }
  },
  mounted() {
    this.getQueryProject(1)
    this.getCompleteProject(1)
  },
  methods: {
    changeQueryReportType(value) {
      let number = 0
      switch (value) {
        case '全部': number = 0; break;
        case '报告表': number = 1; break;
        case '报告书': number = 2; break;
        case '现状评估报告': number = 3; break;
        case '规划': number = 4; break;
        case '验收': number = 5; break;
        default: number = 0;
      }
      this.queryReportType_number = number
      this.getQueryProject(1)
    },
    changeQueryTime(value) {
      let number = 0
      switch (value) {
        case '不限': number = 0; break;
        case '近一周': number = 1; break;
        case '近一个月': number = 2; break;
        case '近半年': number = 3; break;
        case '近一年': number = 4; break;
        default: number = 0;
      }
      this.queryTime_number = number
      this.getQueryProject(1)
    },
    getQueryProject(page) {
      this.queryLoading = true

      let pageIndex = page - 1,
          pageSize = this.queryPageSize,
          time = this.queryTime_number,
          Report_type = this.queryReportType_number,
          MProvince = this.queryMProvince,
          MCity = this.queryMCity,
          Project_name = this.querySearchText

      axios.post('/projectInformation/findAllProject', {
          pageIndex,
          pageSize,
          time,
          Report_type,
          MProvince,
          MCity,
          Project_name,
      }).then((res)=>{
        this.queryData = res.projectList
        this.pageTotalQuery = res.countProjectList
        this.queryLoading = false
      })

    },
    getCompleteProject(page) {
      this.completeLoading = true

      let pageIndex = page - 1,
          pageSize = this.completePageSize

      axios.post('/projectInformation/findAllProject', {
        pageIndex,
        pageSize,
      }).then((res)=>{
        this.completeData = res.projectList
        this.completePageTotal = res.countProjectList
        this.completeLoading = false
      })
    },

    querySearch(value) {
      this.querySearchText = value
      this.getQueryProject(1)
    },

    changeQueryMProvince(province){
      let cityList = this.cityList
      for (let i in cityList) {
        let info = cityList[i]
        if (province == info.name) {
          this.cities = info.cityList
        }
      }
      this.queryMProvince = province
    },

    changeQueryMcity(city) {
      this.queryMCity = city
      this.getQueryProject(1)
    },

    queryPageChangeSize(size) {
      this.queryPageSize = size
      this.getQueryProject(1)
    },
    completePageChangeSize(size) {
      this.completePageSize = size
      this.getCompleteProject(1)
    },
  },
}
</script>

<style lang="css">
</style>
